
/*
总结
+ JSX 是React的核心内容，用于创建虚拟 DOM，JSX是 React.createElement() 的语法糖，
+ JSX 表示在JS代码中书写 HTML 结构，是React声明式的体现
+ 使用 JSX 配合嵌入的 JS 表达式 `{}` ，可实现数据渲染，条件渲染，列表渲染，可以渲染任意的UI结构
+ 结果使用 className 和 style 的方式给 JSX 添加样式

+ React 完全利用 JS 的语言自身的能力来编写 UI（对比VUE需学习一系列指令后才能开发，Vue 属于造轮子增强HTML的功能）
*/
import React from "react";
import ReactDOM from "react-dom";
import './base.css'

const list = [
    { id: 1, name: "刘德华", content: "给我一杯忘情水" },
    { id: 2, name: "五月天", content: "不打扰，是我的温柔" },
    { id: 3, name: "毛不易", content: "像我这样优秀的人" }
];

const h1Node = <div>
    {/* 通过三元来判断显示什么 */}
    {list.length ?
        <ul >
            {list.map(item => <li className="list" key={item.id}>
                <h3>评论人：{item.name}</h3>
                <p>评论内容：{item.content}</p>
            </li>)}
        </ul> :
        <div>暂无数据</div>}
</div>



// 渲染元素
// ReactDOM.render(创建的React元素,真实DOM作为挂载点)
ReactDOM.render(h1Node, document.getElementById('root'))